<div class="main-top">
  <div class="main-top__search">
    <h1>Explore your block</h1>
    <app-search></app-search>
  </div>
</div>
<ng-container *ngIf="(transaction | async) as tx; else transactionNotFound">
  <div class="uk-margin">
    <div class="uk-overflow-auto list-holder">
      <ul>
        <li>
          <p>Transaction hash</p>
          <b>{{tx.tx_hash}}</b>
        </li>
        <li>
          <p>Created at</p>
          <b>{{tx.created_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.created_at | timeAgo }})</b>
        </li>
        <li *ngIf="!tx.to">
          <p>Contract address</p>
          <b>
            <a routerLink="/addr/{{tx.contract_address}}">{{tx.contract_address}}</a>
          </b>
        </li>
        <li>
          <p>From</p>
          <b>
            <a routerLink="/addr/{{tx.from}}">{{tx.from}}</a>
          </b>
        </li>
        <li *ngIf="tx.to">
          <p>To</p>
          <b>
            <a routerLink="/addr/{{tx.to}}">{{tx.to}}</a>
          </b>
        </li>
        <li>
          <p>Value</p>
          <b>{{tx.value | weiToGO | bigNumber}}</b>
        </li>
        <li>
          <ul>
            <li>
              <p>Gas price</p>
              <b>{{tx.gas_price| toGwei}}</b>
            </li>
            <li>
              <p>Gas limit</p>
              <b>{{tx.gas_limit | bigNumber}}</b>
            </li>
            <li>
              <p>Gas used</p>
              <b>{{tx.gas_fee/tx.gas_price | bigNumber}}</b>
            </li>
            <li>
              <p>Gas fee</p>
              <b>{{tx.gas_fee | weiToGO | bigNumber}}</b>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
              <p>Block number</p>
              <b>
                <a routerLink="/block/{{tx.block_number}}">{{tx.block_number}}</a>
              </b>
            </li>
            <li>
              <p>Nonce</p>
              <b>{{tx.nonce}}</b>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="list-holder__footer">

      <div>
        <p>Input data
          <span class="pull-r btn-group">
            <button class="btn btn--sm" [ngClass]="{'btn--active': !showUtf8}" (click)="showUtf8 = false">HEX</button>
            <button class="btn btn--sm" [ngClass]="{'btn--active': showUtf8}" (click)="showUtf8 = true">UTF-8</button>
          </span>
        </p>
        <b>
          <pre class="code">{{tx.input_data | hex2str: showUtf8}}</pre>
        </b>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #transactionNotFound>
  <app-info text="Transaction not found."></app-info>
</ng-template>